<template>
  <a-modal
    width="620px"
    :visible="open"
    :templateId="currentTemplateId"
    @cancel="cancel"
    :maskClosable="false"
  >

    <template>
      <a-divider orientation="left"><h3>节点管理中心</h3></a-divider>
      <div style="height: 450px;overflow-x: hidden;overflow-y: scroll;margin-top: 2%">
        <a-steps direction="vertical" :current="0">
          <a-step  v-for="item in stepArr" :key="item.id" :title="item.stepName" >
            <template #description>
              <span>{{ ['[人工值守] 该节点需要工作人员终端主动扫码后结束','[主动扫码] 该节点由用户主动扫描节点码后结束','[主动完成] 该节点由用户主动点击下一步后结束'][item.stepType-1] }}</span>
              <span style="float: right" @click="$emit('editStepFun',item)">编辑该节点</span>
            </template>
          </a-step>
        </a-steps>
      </div>
    </template>
    <template slot="footer">
      <a-button :disabled="disabled" @click="cancel">
        关闭
      </a-button>
      <a-button type="primary" :disabled="disabled" @click="$emit('addStepFun',currentTemplateId)">
        新增步骤
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import ModGuideTemplateStepAddForm from './ModGuideTemplateStepForm'
export default {
  ...ModGuideTemplateStepAddForm
}
</script>
